<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
	renderKitId="PRIMEFACES_MOBILE">

	<pm:page title="Sitios">

		<f:facet name="postinit">
			<h:outputScript library="primefaces" name="gmap/gmap.js" />
			<script type="text/javascript"
				src="http://maps.google.com/maps/api/js?sensor=true"></script>
			<script type="text/javascript">
                function findMe() {
                    navigator.geolocation.getCurrentPosition(
                        function(position) {
                            var map = PF('gmap').getMap(),
                            latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                            map.setCenter(latlng);

                            var marker = new google.maps.Marker({
                                position: latlng
                            });

                            marker.setMap(map);
                        },
                        function(error) {
                            alert(error.message);
                        },
                        {
                           enableHighAccuracy: true
                        });
                }

            </script>
		</f:facet>

		<!-- Main View -->
		<pm:view id="main" swatch="b">
			<pm:header title="Sitios" swatch="b">

			</pm:header>

			<pm:content>
				<p:gmap fitBounds="true" zoom="13" type="MAP" widgetVar="gmap"
					model="#{sitioBean.simpleModel}" style="width:100%;height:15em">
				</p:gmap>

				<p:separator />

				<p:commandButton type="button" value="Mi Ubicacion"
					onclick="findMe()" />
			</pm:content>

		</pm:view>

	</pm:page>

</f:view>